//准备基础数据
let imgUrl = ['../img/f1.jpg', '../img/f2.jpg', '../img/f3.jpg', '../img/f4.jpg']
//定时器的编号
let id;
//标定轮播图的下标
let index = 0;
//轮播的图片对象
let img = document.querySelector('.swiper-img')
//分页器li对象数组
let li = document.querySelectorAll('.pagination>ul>li')
//轮播容器
let swiperContainer = document.querySelector('.swiper-container')
//鼠标移入时执行的操作
swiperContainer.addEventListener('mouseenter', stopLoop, false)
//鼠标移出时触发的函数和操作
swiperContainer.addEventListener('mouseleave', loop, false)

//给每一个li绑定事件
for (let i = 0; i < li.length; i++) {
    li[i].onmouseenter = function () {
        //修改当前的li激活
        for (let j = 0; j < li.length; j++) {
            li[j].className = ''
            if (i === j) {
                li[j].className = 'active'
            }
        }
        //修改img的图片
        index = i
        let imgSrc = imgUrl[index]
        img.src = imgSrc
    }
}

/**
 * 描述 执行轮播的操作
 * @date 2020-09-22
 * @returns {any}
 */
function loop() {
    //先清空上一个定时器
    if (id) {
        clearInterval(id)
    }
    //新创建一个定时器
    id = setInterval(function () {
        //对下标进行增加
        index++
        if (index >= imgUrl.length) {
            index = 0
        }
        //console.log(index)
        //设置img的src值
        let imgSrc = imgUrl[index]
        img.src = imgSrc

        //同步修改li的class属性
        for (let i = 0; i < li.length; i++) {
            li[i].className = ''
            if (i === index) {
                li[i].className = 'active'
            }
        }
    }, 1000)
    console.log('id=' + id)
}

/**
 * 描述 停止轮播
 * @date 2020-09-22
 * @returns {any}
 */
function stopLoop() {
    if (id) {
        clearInterval(id)
    }
}
//启动轮播
loop()